{% extends "admin/base.html" %}
{% load i18n %}
{% load static %}
{% load admin_urls %}
{% load admin_modify %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {{ media }}
{% endblock %}

{% block content %}
  <style type="text/css">
    .inline-group .tabular td.original p{
      display: none;
    }
    .inline-group .tabular tr.has_original td {
      padding: 8px;
    }
    .inline-group .tabular tr.add-row {
      display: none;
    }
    .page-header{
      padding-bottom: 15px;
      border-bottom: 1px #DCDFE6 solid;
      margin-bottom: 20px;
    }
    .el-page-header__content {
      font-size: 18px !important;
      color: #303133;
      font-weight: 900;
    }
    .el-dialog__body {
      padding: 0;
    }
  </style>
  <div id="content-main" class="form-main">
    <div class="page-header">
      <el-page-header @back="goBack" content="{{title}}"/>
    </div>
    {% if not is_popup %}
      <div id="object-toolbar" style="position: absolute; right: 40px; top: 15px;">
        <div>
          <el-dialog title="{% trans "History" %}" :visible.sync="dialogTableVisible">
            <iframe frameborder="0" :src="url" width="100%" height="300"></iframe>
          </el-dialog>
          {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
          <el-button @click="go_url('{% add_preserved_filters history_url %}')" size="small" class="historylink" icon="fas fa-history">
            {% trans "History" %}
          </el-button>
        </div>
        {% if has_absolute_url %}
          <div>
            <el-button @click="window.open('{{ absolute_url }}')" size="small" class="viewsitelink" icon="fas fa-globe-asia">{% trans "View on site" %}</el-button>
          </div>
        {% endif %}
      </div>
  {% endif %}
    <form {% if has_file_field %} enctype="multipart/form-data" {% endif %} action="{{ form_url }}" method="post" id="{{ opts.model_name }}_form" novalidate>
      {% csrf_token %}
      {% block form_top %}
        {# 在 form 表单头展示内容 #}
      {% endblock %}
      <div>
          {% if is_popup %}
            <input type="hidden" name="{{ is_popup_var }}" value="1"/>
          {% endif %}
          {% if to_field %}
            <input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}"/>
          {% endif %}
          {% if save_on_top %}
            {% block submit_buttons_top %}
              {% submit_row %}
            {% endblock %}
          {% endif %}
          {% if errors %}
              <div id="alert">
                  <el-alert title="{% if errors|length == 1 %}
                      {% trans "Please correct the error below." %}
                  {% else %}
                      {% trans "Please correct the errors below." %}
                  {% endif %}" type="error">
                  </el-alert>
              </div>
              {{ adminform.form.non_field_errors }}
          {% endif %}

          {% block field_sets %}
              {% for fieldset in adminform %}
                  {% include "admin/includes/fieldset.html" %}
              {% endfor %}
          {% endblock %}

          {% block after_field_sets %}

          {% endblock %}

          {% block inline_field_sets %}
              {% for inline_admin_formset in inline_admin_formsets %}
                  {% include inline_admin_formset.opts.template %}
              {% endfor %}
          {% endblock %}

          {% block after_related_objects %}

          {% endblock %}

          {% block submit_buttons_bottom %}
            {% submit_row %}
          {% endblock %}

          {% block admin_change_form_document_ready %}
              <script type="text/javascript"
                      id="django-admin-form-add-constants"
                      src="{% static 'admin/js/change_form.js' %}"
                      {% if adminform and add %}
                      data-model-name="{{ opts.model_name }}"
                      {% endif %}>
              </script>
          {% endblock %}
          {# JavaScript for prepopulated fields #}
          {% prepopulated_fields_js %}
      </div>
      </form>
  </div>
  <script type="text/javascript">
    new Vue({
      el:'.page-header',
      methods:{
        goBack:function () {
          const array = location.pathname.split('/');
          if (array.length === 5||array.length === 6) {
            window.location.href = '/' + array[1] + '/' + array[2];
          } else {
            const referrer = document.referrer;
            if (referrer && document.URL !== referrer) {
              window.location.href = referrer;
            } else {
              window.history.go(-1);
            }
          }
        }
      }
    });
    new Vue({
      el: '#object-toolbar',
      data: function () {
        return {
          dialogTableVisible: false,
          url: ''
        }
      },
      methods: {
        go_url: function (url) {
          this.url = url;
          this.dialogTableVisible = true;
        }
      }
    });
    if (document.getElementById('alert')) {
        new Vue({
            el: '#alert'
        })
    }
  </script>
{% endblock %}
